<template>
  <div class="app-container">
<!--      <github-corner class="github-corner" />-->

<!--      <panel-group @handleSetLineChartData="handleSetLineChartData" />-->

<!--      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
<!--        <line-chart :chart-data="lineChartData" />-->
<!--      </el-row>-->
<!--      <el-row :gutter="32">-->
<!--        <el-col :xs="24" :sm="24" :lg="8">-->
<!--          <div class="chart-wrapper">-->
<!--            <radar-chart />-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :xs="24" :sm="24" :lg="8">-->
<!--          <div class="chart-wrapper">-->
<!--            <pie-chart />-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :xs="24" :sm="24" :lg="8">-->
<!--          <div class="chart-wrapper">-->
<!--            <bar-chart />-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <h2 class="title">
        欢迎登录报纸标注任务管理系统！
      </h2>
  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Dashboard',
  components: {
    GithubCorner,
    PanelGroup,
    LineChart,
    RadarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.el-menu-item-group__title {
  padding: 0px 0 0px 0px;
  line-height: normal;
  font-size: 12px;
  color: #909399;
}

//评价多选样式
.el-checkbox.is-bordered.el-checkbox--small {
  padding: 5px 15px 5px 10px;
  margin-top: 3px;
  border-radius: 3px;
  width: 250px;
  height: 100%;
}

//分割线
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}

.avatar {
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
}

.title {
  margin: 300px auto 0 auto;
  text-align: center;
  color: #0d99f6;
  font-size: 50px;
}

.subTitle {
  margin: 15px auto 0 auto;
  text-align: center;
  color: black;
  font-size: 18px;
}

.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin-bottom: 25px
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

.card-panel-indicator {
  padding-left: 10px;
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  display: flex;
  overflow: hidden;
  color: #666;
  background: #fff;
  border-color: rgba(0, 0, 0, .05);

  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }

    .icon-positive {
      background: #36a3f7;
    }

    .icon-negetive {
      background: #f4516c;
    }
  }

  //.icon-positive {
  //  color: #36a3f7;
  //}
  //
  //.icon-negetive {
  //  color: #f4516c;
  //}

  .card-panel-icon-wrapper {
    float: left;
    margin: 7px auto 7px 14px;
    padding: 20px 16px 16px 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .card-panel-description {
    float: right;
    font-weight: bold;
    margin: 26px;
    margin-left: 0;

    .card-panel-text {
      line-height: 18px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 20px;
      margin-bottom: 12px;
    }

    .card-panel-num {
      font-size: 24px;
      color: darkorange;
    }
  }
}

.home {
  .isActive {
    .icon-people {
      background: #40c9c6;
    }
  }

  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 1vw;
    }

    .card-panel {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 4px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-classes {
          background: #f4516c;
        }
      }

      .icon-people {
        //color: #40c9c6;
      }

      .icon-classes {
        color: #f4516c;
      }

      .card-panel-icon-wrapper {
        flex: 1;
        order: 1;
        margin: 1vw 0vw 1vw 1vw;
        padding: 1vw;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        text-align: center;
      }

      .card-panel-icon {
        font-size: 3.5vw;
      }

      .card-panel-description {
        order: 2;
        flex: 2;
        height: 100%;
        font-weight: bold;
        margin: 1vw 1vw 1vw 2vw;

        .card-panel-text {
          line-height: 1vw;
          color: rgba(0, 0, 0, 0.45);
          font-size: 1vw;
          margin-bottom: 1vw;
        }

        .card-panel-class {
          line-height: 1.5vw;
          color: rgba(0, 0, 0, 0.45);
          font-size: 1.5vw;
          margin-bottom: 1vw;
        }

        .card-panel-num {
          font-size: 1vw;
          color: #f4516c;
        }

        .card-panel-course {
          font-size: 1vw;
          color: #f4516c;
        }
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.checkbox-div {
  .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 4px 4px 4px 4px;
  }
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-menu {
  background-color: whitesmoke;
}

.el-menu-item {
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
  color: black;
}

.el-menu-item.is-active {
  color: black;
}

.el-menu-item:focus, .el-menu-item:hover {
  outline: 0;
  background-color: #9de7e7;
}

</style>

<!--  .dashboard-editor-container {-->
<!--    padding: 32px;-->
<!--    background-color: rgb(240, 242, 245);-->
<!--    position: relative;-->

<!--    .github-corner {-->
<!--      position: absolute;-->
<!--      top: 0;-->
<!--      border: 0;-->
<!--      right: 0;-->
<!--    }-->

<!--    .chart-wrapper {-->
<!--      background: #fff;-->
<!--      padding: 16px 16px 0;-->
<!--      margin-bottom: 32px;-->
<!--    }-->
<!--  }-->

<!--  @media (max-width:1024px) {-->
<!--    .chart-wrapper {-->
<!--      padding: 8px;-->
<!--    }-->
<!--  }-->
<!--</style>-->
